<template>
  <el-drawer
    v-model="isShow"
    size="50%"
    title="举一反三"
    class="one-win-three-drawer"
  >
    <template #header>
      <div class="flex-between">
        举一反三
        <div class="header-right flex">
          <span>已选{{ selectQuestionList.length }}题</span>
          <el-button
            type="primary"
            @click="onPreview"
            :disabled="!selectQuestionList.length"
          >
            发送预览
          </el-button>
        </div>
      </div>
    </template>
    <div class="one-container">
      <el-empty
        v-if="!questionList.length"
        v-loading="loading"
        data="暂无题目"
      ></el-empty>
      <div
        v-for="(question, index) in questionList"
        :key="index"
        :class="isExist(question.topic_id) && 'topic-active'"
      >
        <AssignTopic
          :index="index + 1"
          :topic-data="question.question_detail"
          :is-basket="false"
          :is-similar="false"
        >
          <template #more-action>
            <div
              class="basket-btn"
              :class="isExist(question.topic_id) ? '' : 'remove-btn'"
              @click="onToggleQuestion(question)"
            >
              <span>{{ isExist(question.topic_id) ? '移除' : '添加' }}</span>
            </div>
          </template>
        </AssignTopic>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { defineModel, ref } from 'vue'
import { getJyfsQustions as getOneThree } from '@/apis/target-boost'
import AssignTopic from '../components/AssignTopic.vue'

const emit = defineEmits(['getOneThreeInfo'])
const isShow = defineModel('isShow')
const props = defineProps({
  question: {
    type: Object,
    required: true
  }
})
const loading = ref(false)
const questionList = ref([])
const selectQuestionList = ref([])

/**
 * 获取举一反三
 */
const getOneThreeInfo = async () => {
  loading.value = true
  const { question_detail } = props.question
  const res = await getOneThree({
    analogue_request_list: [
      {
        question_id: question_detail.id,
        kpoint_ids: (question_detail.keypoint || []).map(item => item.id),
        grade: question_detail.grade,
        question_type: question_detail.type,
        content: question_detail.content,
        filter_para: {
          duplicate_id_list: [question_detail.id]
        }
      }
    ],
    check_other_source: 0
  })
  loading.value = false
  const { analgoue_question_list } = res.data
  if (analgoue_question_list) {
    let list = analgoue_question_list[0].analogue_questions || []

    questionList.value = list.map(question => ({
      question_detail: question,
      source: question.source,
      is_similar: 1,
      relation_id: props.question.question_detail.id,
      topic_id: question.id,
      subject_id: question.subject,
      topic_type: question.type
    }))
  }
}

const onToggleQuestion = question => {
  let index = selectQuestionList.value.findIndex(
    item => item.topic_id === question.topic_id
  )
  if (index >= 0) {
    selectQuestionList.value.splice(index, 1)
    return
  }
  selectQuestionList.value.push(question)
}
const isExist = id => {
  return selectQuestionList.value.map(item => item.topic_id).indexOf(id) !== -1
}

const onPreview = () => {
  emit('getOneThreeInfo', {
    questionList: selectQuestionList.value
  })
  isShow.value = false
}
const initData = () => {
  // 数据处理
  getOneThreeInfo()
}
initData()
</script>

<style lang="less" scoped>
.one-win-three-drawer {
  .header-right {
    gap: 20px;
  }
  .one-container {
    :deep(.assign-topic) {
      cursor: pointer;
    }
    .topic-active {
      :deep(.topic-cpn) {
        border: 2px solid @theme-color;
      }
    }
  }
  .basket-btn {
    padding: 2px 16px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px 4px 4px 4px;
    border-color: #448efb;
    background-color: unset;
    border: 1px solid #bfd9ff;

    &:hover {
      opacity: 0.95;
    }
  }
  .remove-btn {
    background: #bfd9ff;
    color: #448efb;
  }
}
</style>

<!-- eslint-disable -->
<style lang="less">
.one-win-three-drawer {
  .el-drawer__header {
    font-weight: bold;
  }
  .el-drawer__body {
    background-color: #f7f8fa;
  }
}
</style>
